<template>
  <div class="app-container">
    <div class="title">联系我们</div>
    <div class="view">
      <el-form ref="ruleForm" :model="addForm" :rules="rules" label-width="100px" class="demo-ruleForm">
        <el-form-item label="公司信息：" prop="companyInfo">
          <el-input
            v-model="addForm.companyInfo"
            type="textarea"
            resize="none"
            :rows="13"
            placeholder="请输入"
            name="companyInfo"
            tabindex="1"
            auto-complete="off"
          />
        </el-form-item>
        <el-form-item label="法律咨询：" prop="legalAdvice">
          <el-input
            v-model="addForm.legalAdvice"
            type="textarea"
            resize="none"
            :rows="13"
            placeholder="请输入"
            name="legalAdvice"
            tabindex="2"
            auto-complete="off"
          />
        </el-form-item>
        <!-- <el-form-item label="联系邮箱：" prop="email">
          <div v-if="emailBoolean">
            <span class="text">{{ copyForm.email }}</span>
            <img src="../../assets/images/pen.png" alt="" @click="emailBoolean=false">
          </div>
          <div v-else-if="!emailBoolean" class="edge">
            <div>
              <el-input v-model="addForm.email" name="email" />
            </div>
            <div class="btn">
              <span @click="sureBtn">√</span>
              &nbsp;&nbsp;&nbsp;&nbsp;
              <span @click="emailBoolean=true">×</span>
            </div>
          </div>
        </el-form-item> -->
        <!-- <el-form-item label="联系电话：" prop="telphone">
          <div v-if="telphoneBoolean">
            <span class="text">{{ copyForm.telphone }}</span>
            <img src="../../assets/images/pen.png" alt="" @click="telphoneBoolean=false">
          </div>
          <div v-else-if="!telphoneBoolean" class="edge">
            <div>
              <el-input v-model="addForm.telphone" name="telphone" />
            </div>
            <div class="btn">
              <span @click="sureBtn">√</span>
              &nbsp;&nbsp;&nbsp;&nbsp;
              <span @click="telphoneBoolean=true">×</span>
            </div>
          </div>
        </el-form-item> -->
        <div class="btnsubmit">
          <el-button
            type="primary"
            class="create"
            @click.native.prevent="sureBtn"
          >保存</el-button>
        </div>
      </el-form>
    </div>
  </div>

</template>

<script>

import { detailContact, sureContact } from '@/api/contact'

export default {
  name: 'OrganizationUser',
  components: {
  },

  data() {
    return {
      addForm: {
        companyInfo: '',
        legalAdvice: ''
      },
      copyForm: {},
      spBoolean: true,
      emailBoolean: true,
      telphoneBoolean: true,
      listLoading: false,
      rules: {
        companyInfo: [
          { required: true, message: '必填', trigger: 'change' }
        ],
        legalAdvice: [
          { required: true, message: '必填', trigger: 'change' }
          // { pattern: /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/, message: '邮箱格式错误' }
        ]
        // telphone: [
        //   { required: true, message: '必填', trigger: 'change' },
        //   { pattern: /^1[34578]\d{9}$/, message: '手机号格式错误' }
        // ]
      }
    }
  },
  watch: {

  },
  mounted() {
    this.getDetail()
  },
  methods: {
    // 获取数据
    async getDetail() {
      const res = await detailContact()
      if (res.code === 200) {
        if (res.data) {
          this.addForm = res.data
          this.copyForm = JSON.parse(JSON.stringify(this.addForm))
        }
      }
    },
    async sureBtn() {
      const res = await sureContact(this.addForm)
      if (res.code === 200) {
        // this.spBoolean = true
        // this.emailBoolean = true
        // this.telphoneBoolean = true
        this.$message({
          type: 'success',
          message: '编辑成功!',
          showClose: true,
          center: true,
          duration: 2 * 1000
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.app-container{
 .title{
    // width: 95%;
    font-size: 18px;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
    padding: 32px 0 20px 30px;
    border-bottom: 1px solid rgba(221,221,221,0.2);
 }
 .view{
   width: 80%;
    margin: 45px 0 0 28px;
    .text{
      margin-right: 40px;
      font-size:14px;
      font-weight:400;
      color:rgba(255,255,255,0.65);
    }
    .edge{
      display: flex;
      .btn{
        color: #F7B500;
        margin-left: 20px;
        span{
          cursor: pointer;
        }
      }
    }
    img{
      cursor: pointer;
    }
 }
}
.btnsubmit{
    text-align: center;
    margin-top: 30px;
    padding-bottom: 30px;
    .create{
      cursor: pointer;
      padding: 7px 10px 7px 10px;
      border-radius: 2px;
      font-size: 14px;
      font-weight: 400;
      color: rgba(255,255,255,1);
      width:60px;
      height:32px;
      margin-right: 5px;
      background:#F7B500;
    }
  }
</style>
